<template>
  <button class="linear-button">
    <slot name="buttonText"></slot>
  </button>
</template>

<script setup></script>

<style lang="less" scoped>
// 参考element-plus button

.linear-button {
  position: relative;
  height: 32px;
  padding: 8px 15px;
  border-radius: 4px;
  background-color: #ddd;
  color: #fff;
  cursor: pointer;
  border: none;
  font-size: 14px;
  transition: all 0.475s;

  &:hover::before {
    transform: scaleX(1);
    opacity: 0.6;
  }

  &:hover {
    color: #000;
  }

  &:active::before {
    opacity: 1;
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: 0 50%;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(
      82.3deg,
      rgba(150, 93, 233, 1) 10.8%,
      rgba(99, 88, 238, 1) 94.3%
    );
    transition: all 0.475s;
  }
}
</style>
